<template>
  <div>
    <h1>事件系统</h1>
    <div>
      <h3>
        <el-link type="primary" href="https://x6.antv.vision/zh/docs/tutorial/intermediate/events" target="_blank">使用文档</el-link>
      </h3>
    </div>
    <div>
      <el-button type="" @click="flag=!flag">显示/隐藏鼠标事件</el-button>

    </div>
    <el-table v-show="tableData&&flag" :data="tableData" stripe style="width: 1200">
      <el-table-column prop="name" label="事件">
      </el-table-column>
      <el-table-column prop="cell" label="cell 节点/边">
      </el-table-column>
      <el-table-column prop="node" label="node 节点">
      </el-table-column>
      <el-table-column prop="edge" label="edge 边">
      </el-table-column>
      <el-table-column prop="blank" label="blank 画布空白区域">
      </el-table-column>
    </el-table>
    <div id="container5">
    </div>
  </div>
</template>

<script>
import dataObj from "@/mock/baseData.js";
import menuObj from "@/mock/menuAction.js";
import { Graph } from "@antv/x6";
export default {
  data() {
    return {
      graph: "",
      flag: false,
      tableData: [],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // console.log("dataObj", dataObj);
      // console.log("menuObj", menuObj);
      if (menuObj) {
        let data = [];
        menuObj.name.map((item, i) => {
          data.push({
            name: item,
            cell: menuObj.cell[i],
            node: menuObj.node[i],
            edge: menuObj.edge[i],
            blank: menuObj.blank[i],
          });
        });
        this.tableData = data;
      }
      //
      let width = document.body.clientWidth; //网页可见区域宽：
      let height = document.body.clientHeight; //网页可见区域高：
      // 渲染画布
      const graph = new Graph({
        container: document.getElementById("container5"),
        width,
        height: 900,
        panning: {
          enabled: true, //画布可以平移
          //还可以配置 eventTypes 来设置触发画布拖拽的行为，支持 leftMouseDown、 rightMouseDown、mouseWheel，默认为 ['leftMouseDown'] 。
          eventTypes: ["leftMouseDown", "rightMouseDown", "mouseWheel"],
        },

        background: {
          color: "#fffbe6", // 设置画布背景颜色
        },
        grid: {
          size: 10, // 网格大小 10px
          visible: true, // 渲染网格背景
        },
        scroller: {
          // enabled: true,
        },
        minimap: {
          //小地图
          // enabled: true,
          // container: minimapContainer,
        },
      });
      graph.fromJSON(dataObj);
      graph.centerContent(); //内容居中
      this.graph = graph;
      this.clickAction(); //系统事件
      this.custoAction(); //自定义事件
      this.addDelChangeAction(); //监听添加删除改变事件
    },
    clickAction() {
      this.graph.on("cell:click", ({ e, x, y, cell, view }) => {
        console.log("cell 节点/边:click", e, x, y, cell, view);
      });
      this.graph.on("node:click", ({ e, x, y, node, view }) => {
        console.log("node 节点:click", e, x, y, node, view);
      });
      this.graph.on("edge:click", ({ e, x, y, edge, view }) => {
        console.log("	edge 边:click", e, x, y, edge, view);
      });
      this.graph.on("blank:click", ({ e, x, y }) => {
        console.log("blank 画布空白区域:click", e, x, y);
      });
    },
    custoAction() {
      //自定义事件
      this.graph.on("node:delete", ({ view, e }) => {
        console.log("view, e ", view, e);
        e.stopPropagation();
        view.cell.remove();
      });
      this.graph.on("node:customevent", ({ name, view, e }) => {
        console.log("name, view, e ", name, view, e);
        if (name === "del_me") {
          e.stopPropagation();
          view.cell.remove();
        }
      });
    },
    addDelChangeAction() {
      //监听添加删除改变事件
      this.graph.on("node:added", ({ node, index, options }) => {
        console.log("node:added  node, index, options", node, index, options);
      });
      this.graph.on("node:removed", ({ node, index, options }) => {
        console.log("node:removed  node, index, options", node, index, options);
      });
      this.graph.on("node:changed", ({ node, options }) => {
        console.log("node:changed  node,  options", node, options);
      });

      this.graph.on("edge:added", ({ edge, index, options }) => {
        console.log("edge:added  edge, index, options", edge, index, options);
      });
      this.graph.on("edge:removed", ({ edge, index, options }) => {
        console.log("edge:removed  edge, index, options", edge, index, options);
      });
      this.graph.on("edge:changed", ({ edge, options }) => {
        console.log("edge:changed  edge,  options", edge, options);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#container5 {
  width: 100%;
  height: 500px;
}
</style>